<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>苹果菜单</title>
<style type="text/css">
body {margin:0px;}
#div1 {text-align:center; position:absolute; bottom:0px;  width:800px; margin:0 auto;}
#div1 img {border:none;}
#div1 .box {display:block; width:400px; margin:0 auto; border-bottom:dotted 1px black; text-decoration:none; color:#333;}
#div1 .box:hover {border-bottom:solid 1px black;}

</style>
<script type="text/javascript" >
	document.onmousemove = function(evt){
		var ev = evt || event;
		var imgs = document.getElementsByTagName("img");
		for(var i=0; i<imgs.length; i++){
			var distance = dis(evt, imgs[i]); //得到鼠标和图片直接的距离
			
			imgs[i].style.width = 250-Math.min(200,distance)+"px";
			
		}
		
		function dis(evt, img){
			//x,y代表图片的中心点位置
			//alert(img.parentNode.parentNode.offsetLeft);
			//alert(img.offsetLeft);
			
			var x = img.parentNode.parentNode.offsetLeft+img.offsetLeft+img.offsetWidth/2;
			var y = img.parentNode.parentNode.offsetTop+img.offsetTop+img.offsetHeight/2;
			return Math.sqrt(Math.pow(evt.clientX-x,2)+ Math.pow((evt.clientY-y),2));
		}
	}

</script>
</head>

<body>
<div id="div1">
	<a href="#"><img src="images/1.png" width="64"  /></a>
	<a href="#"><img src="images/2.png" width="64" /></a>
	<a href="#"><img src="images/3.png" width="64"  /></a>
	<a href="#"><img src="images/4.png" width="64" /></a>
	<a href="#"><img src="images/5.png" width="64" /></a>
</div>
</body>
</html>
